<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>图片缩放-手指触摸-存在 bug</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../Switch/css/Switch.css">
    <link rel="stylesheet" href="css/Zoom.css">
</head>
<body>

<style>
    .container {
        width: 100%;
        height: 300px;
    }

    .container .image-shell {
        width: 100%;
        height: 100%;
        position: relative;
        left: 0;
        top: 0;
        margin: 0;
        overflow: auto;
    }

    .container .image {
        width: 100%;
        min-height: 100%;
        position: relative;
        left: 0;
        top: 0;
    }
</style>
<div class="container">
    <div class="switch">
        <div class="items">
            <div class="item">

                <div class="image-shell">
                    <img src="image/01.jpg" class="image image-for-zoom">
                </div>

            </div>

            <div class="item">

                <div class="image-shell">
                    <img src="image/02.jpg" class="image image-for-zoom">
                </div>

            </div>
        </div>
    </div>
</div>
<script src="../SmallJs/SmallJs.js"></script>
<script src="../Switch/js/Switch.js"></script>
<script src="js/Zoom.js"></script>
<script>
    "use strict";

    var c = G('.container');

    var i = G('.in' , c.get(0));
    var images = G('.image-for-zoom');

    var is = G('.image-shell');
    is.each(function(dom){
        dom = G(dom);
        dom.on('scroll' , G.stop , true , false);
    });

    var z = [];
    images.each(function(dom){
        z.push(new Zoom(dom));
    });

    var s = new Switch(c.get(0));
</script>
</body>
</html>